<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{common/header :: commonHead}">
    <title>限制详情</title>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="row form-body form-horizontal m-t" method="post"
                          th:action="${editable == null? '/consumption_quota/add':'/consumption_quota/edit'}">
                        <input name="consumptionId" th:value="${editable?.consumptionId}" style="display: none">
                        <div class="col-md-12 droppable sortable ui-droppable ui-sortable">
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">满额规则名称：</label>
                                <div class="col-sm-6">
                                    <input type="text" required id="threshoidName" name="threshoidName" class="form-control"
                                           th:value="${editable?.threshoidName }" placeholder="满额规则名称">
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">满额阀值：</label>
                                <div class="col-sm-6">
                                    <input type="text" required id="threshoid" name="threshoid" th:value="${editable?.threshoid}" class="form-control" placeholder="满额阀值">
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped"  style="position: static;">
                                <label class="col-sm-3 control-label" >满额规则类型：</label>
                                <div class="col-sm-6">
                                    <select   class="form-control"  th:disabled="${editable == null?false:true}"    id="usetimetype-selector" name="marketingType"
                                            required="required"  >
                                        <option value="">请选择</option>
                                        <option th:selected="${editable?.marketingType == 'integral'}" value="integral">积分
                                        </option>
                                        <option th:selected="${editable?.marketingType == 'coupon'}" value="coupon">优惠券
                                        </option>
                                        <option th:selected="${editable?.marketingType == 'parking'}" value="parking">停车券
                                        </option>
                                    </select>
                                </div>

                            </div>
                            <div class="form-group draggable ui-draggable dropped"
                                 th:style="${'position: static; display:' + (editable?.marketingType == 'integral' ? 'block' : 'none')}"
                                 id="total-input-use">
                                <label class="col-sm-3 control-label"><span style="color: red;">* </span>积分值：</label>
                                <div class="col-sm-6">
                                    <input type="text" th:name="${editable?.marketingType == 'integral' ? 'marketingRule':''}" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" id="coupon-time-hour" class="form-control"
                                           th:value="${editable?.marketingRule}">
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped"
                                 th:style="${'position: static; display:' + (editable?.marketingType == 'coupon' ? 'block' : 'none')}"
                                 id="total-input-hour">
                                <label class="col-sm-3 control-label"><span style="color: red;">* </span>请选择优惠券：</label>
                                <div class="col-sm-6">
                                    <div class="col-sm-6">
                                        <select required id="orgId2" th:name="${editable?.marketingType == 'coupon' ? 'marketingRule':''}" data-placeholder="请选择赠送优惠券..."
                                                class="chosen-select form-control m-b" tabindex="1">
                                            <option value="" th:selected="${editable?.marketingRule == null}">--请选择--
                                            </option>
                                            <option class="id_option" hassubinfo="true"
                                                    th:each="couponDTO:${couponDTOS}"
                                                    th:selected="${editable?.marketingRule == couponDTO.id}"
                                                    th:value="${couponDTO.id }"
                                                    th:text="${couponDTO.name}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped"
                                 th:style="${'position: static; display:' + (editable?.marketingType == 'parking' ? 'block' : 'none')}"
                                 id="total-input-parking">
                                <label class="col-sm-3 control-label"><span style="color: red;">* </span>请选择停车券：</label>
                                <div class="col-sm-6">
                                    <div class="col-sm-6">
                                        <select id="orgId" th:name="${editable?.marketingType == 'parking' ? 'marketingRule':''}" data-placeholder="请选择停车券..."
                                                class="chosen-select form-control m-b" tabindex="1">
                                            <option value="" th:selected="${editable?.marketingRule == null}">
                                                --请选择--
                                            </option>
                                            <option class="id_option" hassubinfo="true"
                                                    th:each="parkingCouponDTO:${parkingCouponDTOS}"
                                                    th:selected="${editable?.marketingRule == parkingCouponDTO.id}"
                                                    th:value="${parkingCouponDTO.id }"
                                                    th:text="${parkingCouponDTO.name}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>

                            <div class="form-group draggable ui-draggable">
                                <div class="col-sm-12 col-sm-offset-3">
                                    <button class="btn btn-primary" type="submit">保存内容</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/plugins/chosen/chosen.jquery.js"></script>
<script>

    $("#usetimetype-selector").change(function () {
        let selection = $(this).val();
        if (selection == "integral") {
            $("#total-input-use").css('display','block');
            $("#coupon-time-hour").attr('name','marketingRule');
            $("#total-input-parking").css('display','none');
            $("#total-input-parking").removeAttr('name');
            $("#total-input-hour").css('display','none');
            $("#total-input-hour").removeAttr('name');
            $("#coupon-time-hour").attr('required','required');
            let a = $("#coupon-time-hour").val();
            if (a==null||a==''){
                return;
            }
        }
        if (selection == "coupon") {
            $("#total-input-use").css('display','none');
            $("#total-input-use").removeAttr('name');
            $("#total-input-hour").css('display','block');
            $("#orgId2").attr('name','marketingRule');
            $("#total-input-parking").css('display','none');
            $("#total-input-parking").removeAttr('name');
            $("#total-input-hour").attr('required','required');
            $("#orgId2").attr('required','required');
            let a = $("#total-input-hour").val();
            let b = $("#orgId2").val();
            if (a==null||a==''|| b==null||b==''){
                return;
            }
        }
        if (selection == 'parking') {
            $("#total-input-use").css('display','none');
            $("#total-input-use").removeAttr('name');
            $("#total-input-hour").css('display','none');
            $("#total-input-hour").removeAttr('name');
            $("#total-input-parking").css('display','block');
            $("#orgId").attr('name','marketingRule');
            $("#total-input-parking").attr('required','required');
            $("#orgId").attr('required','required');
            let a = $("#total-input-parking").val();
            let b = $("#orgId").val();
            if (a==null||a==''|| b==null||b==''){
                return;
            }
        }

        if (selection == '') {
            $("#total-input-use").css('display','none');
            $("#total-input-hour").css('display','none');
            $("#total-input-parking").css('display','none');
        }
    })
</script>
</body>
</html>